<template>
<div>
<!--  <el-button type="primary" @click="kaoshi">开始评测</el-button>-->
  <el-card shadow="never">
    <el-row align="middle" type="flex" justify="space-between">
      <el-col :span="12">
        <span>{{ index+1 }}/{{list.length}}</span>
      </el-col>
      <el-col align="right" :span="12">
        <el-button type="primary" @click="handHandExam">提交</el-button>
      </el-col>
    </el-row>
  </el-card>
  <el-card shadow="never">
    <template v-slot:header>
      <p v-if="quData.content">
        {{ index + 1 }}.{{ quData.content }}
        {{quData.quType === 2?'（多选题）':'（单选题）'}}
      </p>
      <p v-if="quData.image!=null && quData.image!=''">
        <el-image :src="quData.image" style="max-width:100%;" />
      </p>
    </template>
    <div v-if="quData.quType === 1 || quData.quType===3">
      <el-radio-group v-model="radioValue">
        <el-radio v-for="item in quData.answerList" :label="item.id">{{ item.abc }}.{{ item.content }}
          <div v-if="item.image!=null && item.image!=''" style="clear: both">
            <el-image :src="item.image" style="max-width:100%;" />
          </div>
        </el-radio>
      </el-radio-group>
    </div>

    <div v-if="quData.quType === 2">

      <el-checkbox-group v-model="multiValue">
        <el-checkbox v-for="item in quData.answerList" :label="item.id">
          {{ item.abc }}.{{ item.content }}
          <div v-if="item.image!=null && item.image!=''" style="clear: both">
            <el-image :src="item.image" style="max-width:100%;" />
          </div>
        </el-checkbox>
      </el-checkbox-group>

    </div>

    <el-row type="flex" justify="space-between">
      <el-col :span="18">
        <el-button v-if="index>0" @click="handPrevious">上一题</el-button>
        <el-button v-if="index<list.length-1" type="primary" @click="handNext">下一题</el-button>
      </el-col>
    </el-row>
  </el-card>
</div>
</template>

<script>
import Vue from "vue";
import {getKaoDetail, getKao, getPaper, getTi, fillAnswer, handExam} from "@/api/kaoshi";
import { Card } from 'element-ui'
Vue.use(Card)
export default {
  name: "kaoshi",
  data() {
    return {
      detail:{},
      repoList:{},
      list:[],
      index:0,
      quData:{
        answerList:[]
      },
      // 单选选定值
      radioValue: '',
      // 多选选定值
      multiValue: [],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(){
      getKaoDetail(this.$route.query.id).then(res=>{
        console.log(res)
        this.repoList = res.repoList[0]
        this.kaoshi()
      })
    },
    async kaoshi(){
      const {id} = await getKao({
        examId:this.repoList.examId,
        userId:this.$route.query.userId
      })
      const res = await getPaper({id})
      console.log(res)
      this.detail = res
      this.list = [...res.radioList,...res.multiList,...res.judgeList]
      console.log(this.list)
      await this.quDetail()
    },
    async quDetail(){
      const res = await getTi({
        paperId:this.list[this.index].paperId,
        quId:this.list[this.index].quId
      })
      console.log(res)
      this.quData = res
      this.radioValue = ''
      this.multiValue = []

      // 填充该题目的答案
      this.quData.answerList.forEach((item) => {
        if ((this.quData.quType === 1 || this.quData.quType === 3) && item.checked) {
          this.radioValue = item.id
        }

        if (this.quData.quType === 2 && item.checked) {
          this.multiValue.push(item.id)
        }
      })
    },
    async handPrevious(){
      await this.save()
      this.index--
      await this.quDetail()

    },
    async handNext(){
      await this.save()
      this.index++
      await this.quDetail()

    },
     async handHandExam(){
      await this.save()
      const res = await handExam({
        id:this.detail.id,
        appointmentId:this.$route.query.appointmentId
      })
       await this.$router.replace('/')
    },
    async save(){
      if (this.radioValue!==""){
        this.multiValue = [this.radioValue]
      }
      const res = await fillAnswer({
        answers: this.multiValue,
        paperId: this.list[this.index].paperId,
        answer: "",
        quId: this.list[this.index].quId
      })
      console.log(res)
    }
  },

}
</script>

<style scoped>

.qu-content div{
  line-height: 30px;
}

.el-checkbox-group label,.el-radio-group label{
  width: 100%;
  box-sizing: border-box;
}

.card-title{
  background: #eee;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
}
.card-line{
  padding-left: 10px
}
.card-line span {
  cursor: pointer;
  margin: 2px;
}

/deep/
.el-radio, .el-checkbox{
  padding: 9px 20px 9px 10px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  margin-bottom: 10px;
}

.is-checked{
  border: #409eff 1px solid;
}

.el-radio img, .el-checkbox img{
  max-width: 200px;
  max-height: 200px;
  border: #dcdfe6 1px dotted;
}

/deep/
.el-checkbox__inner {
  display: none;
}

/deep/
.el-radio__inner{
  display: none;
}

/deep/
.el-checkbox__label{
  line-height: 30px;
}

/deep/
.el-radio__label{
  line-height: 30px;
}
</style>
